<template>
  <div>
    <h1>注册</h1>
    用户名:<input type="text" v-model.trim="user_name" /><br />
    密码：<input type="text" v-model.trim="password" /><br />
    <button @click="registerBtn">注册</button>
  </div>
</template>

<script>
import { registerAjax } from "@/api/user.js";
export default {
  data() {
    return {
      user_name: "",
      password: "",
    };
  },
  methods: {
    async registerBtn() {
      // 收集完用户名和密码应该有一个正则匹配
      // 匹配用户名和密码是否符合要求
      // 要求
      // 任意字母数字5-16位 用户名
      //任意字母数组0-20位 密码要求
      const userNameReg = /^[0-9A-Za-z]{5,16}/;
      //   userNameReg.test(this.user_name)
      const passwordReg = /^[0-9A-Za-z]{0,20}/;
      if (userNameReg.test(this.user_name) && passwordReg.test(this.password)) {
        const result = await registerAjax({
          user_name: this.user_name,
          password: this.password,
        });
        console.log(result);
        //当注册成功之后清空操作
        this.user_name = "";
        this.password = "";
      } else {
        alert("用户名和密码格式错误，请重新输入！！");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>